<template>
	<div class="sendMsg">
		<label for="input">~</label>
		<input
			type="text"
			id="input"
			maxlength="20"
			placeholder="和观众姥爷聊聊吧！按Enter发送"
			v-model="message"
			@keydown.enter="sendMessage"
		/>
	</div>
</template>

<script>
import { mapActions } from "vuex";
export default {
	data() {
		return {
			message: "",
		};
	},
	methods: {
		...mapActions(["sendMsg"]),

		// 发送消息
		sendMessage() {
			if (!this.message) {
				this.$message.error("发送信息内容不能为空！");
			} else {
				this.sendMsg({ message: this.message, automaticReply: false });
				this.message = "";
			}
		},
	},
};
</script>

<style lang="scss">
.sendMsg {
	display: flex;
	align-items: center;
	padding: 0 10px;
	height: 30px;
	label {
		color: #ccc;
		cursor: pointer;
	}
	input {
		outline: 0;
		border: 0;
		width: 100%;
		padding: 0 8px;
		color: #ccc;
		background-color: transparent;
		caret-color: #ccc;
	}
}
.el-message {
	min-width: 300px;
	padding: 10px;
	font-size: 12px;
	p {
		font-size: 12px;
	}
}
</style>
